<template>
  <div @click="resetComponent"><!--整个组件的应用 -->
       <div class="app-head">
       <div class="app-head-inner">
           <!--跳转到首页 -->
           <router-link :to="{path:'/'}">
                <img src="../assets/logo.png">
           </router-link>
            <div class="head-nav">
                <ul class="nav-list">
                    <li>{{username}}</li>
                    <li v-if="username!== ''" class="nav-pile">|</li>
                    <li v-if="username!== ''" @click="quit">退出</li>
                    <li v-if="username === '' " @click="logClick">登录</li>
                    <li v-if="username === '' " class="nav-pile">|</li>
                    <li v-if="username === '' " @click="regClick">注册</li>
                    <li v-if="username === '' " class="nav-pile">|</li>
                    <li @click="aboutClick">关于</li>
                    <li class="nav-pile">|</li>
                    <li >{{localTime}}</li>
                </ul>    
            </div>
       </div>
       </div>
       <div class="app-content">
           <!--用路由渲染组件，导致内容没有渲染出来，需要将路由进行重定向 -->
           <keep-alive>
               <router-view></router-view>
           </keep-alive>
       </div>
       <div class="app-foot">
           <p>@ 2018 fishenal MIT</p>
       </div>

       <my-dialog :is-show="isShowLogDialog" @on-close="closeDialog('isShowLogDialog')">
           <!--控制变量的显示通过父级 logForm组件-->
           <logForm @has-log='onSuccesslog'></logForm>
       </my-dialog>

       <my-dialog :is-show="isShowRegDialog" @on-close="closeDialog('isShowRegDialog')">
           <!--控制变量的显示通过父级 -->
           <regForm></regForm>
       </my-dialog>
       <!--引入组件dialog  :is-show自定义属性 -->
       <my-dialog :is-show="isShowAboutDialog" @on-close="closeDialog('isShowAboutDialog')">
           <!--控制变量的显示通过父级 -->
            <p>本报告在调研数据的基础上，采用定性与定量相结合的方式深入分析了专车市场发展的驱动因素与阻碍因素、专车市场背后的产业格局、专车企业的竞争格局、用户对专车市场的依赖程度、专车对其他交通工具运力的补充效应等，
                通过这五个章节的研究反映专车市场的发展态势和面临的问题。
                报告力求客观、深入、准确地反映中国专车市场发展情况，为政府、企事业单位和社会各界提供决策依据。
            </p>
       </my-dialog>
  </div>
</template>

<script>
import dialog from './dialog.vue'
import logForm from './logForm.vue'
import regForm from './regForm.vue'
import {eventBus} from '../eventBus'
//调用公共方法
import {getLocalTime,utils} from '../utils/utils.js'

export default {
    components:{
       myDialog: dialog,
       logForm:logForm,
       regForm:regForm
    },
    data(){
        return {
            isShowLogDialog:false, //初始化默认
            isShowRegDialog:false,
            isShowAboutDialog:false,
            username:''//初始化的为空
        }
    },
    created(){
        console.log('created  start');
        const result = this.init() //在这结束loading，还做一些初始化，实现函数自执行
        console.log(result);
        console.log('created  end');
    },
    computed:{
         // 仅读取
         localTime(){
            console.log('computed start');
            return  getLocalTime(new Date(),'yyyy-MM-dd HH:mm');
         },
    },
    methods:{
        aboutClick(){
            this.isShowAboutDialog = true
        },
        logClick(){
            this.isShowLogDialog = true
        },
        regClick(){
            this.isShowRegDialog = true
        },
        //登录成功
        onSuccesslog(data){
            console.log(data);
            this.closeDialog ('isShowLogDialog');
            this.username = data.username;//渲染到页面
        },
        closeDialog(attr){
            //this.attr = false 错误的写法
            this[attr] = false
        },
        resetComponent(){
            eventBus.$emit('reset-component') //哪个组件使用，就在那个组件监听$on
        },
        init(){
            //判断设备类型
           return  utils.browserRedirect();
        }
    },
    mounted(){
      //在这发起后端请求，拿回数据，配合路由钩子做一些事情
    }
   
}
</script>
<style lang="scss" scoped="" type="text/css">

//  @import './src/assets/css/index.scss'; //分号不可去掉 

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
body{background:#f0f2f5;font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;font-size:14px;color:#444}
.app-head{background:#363636;color:#b2b2b2;height:90px;line-height:90px;width:100%;}
.app-head-inner{width:1200px;margin:0 auto;}
.head-logo{float:left;}
.app-head-inner img{width:50px;margin-top:20px;}
.head-nav{float:right;}
.nav-list{margin: 10px 15px;}
.head-nav ul{overflow:hidden;}
.head-nav li{cursor:pointer;float:left;}
.nav-pile{padding:0 10px}
.app-foot{text-align:center;height:80px;width:100%;line-height:80px;background:#e3e4e8;clear:both;margin-top:30px;}
.app-content{width:1200px;margin:0 auto;}
.hr{height:1px;width:100%;background:#ddd}
/*全局样式，多处使用*/
.button{background:#4fc08d;color:#fff;display:inline-block;padding:10px 20px;cursor:pointer}
.button:hover{background:#4fc08d}
.g-form-line{padding:15px 0}
.g-form-label{width:100px;font-size:16px;display:inline-block}
.g-form-input{display:inline-block}
.g-form-input input{height:30px;width:200px;line-height:30px;vertical-align:middle;padding:0 10px;border:1px solid #ccc}
.g-form-btn{padding-left:100px}
.g-form-error{color:red;padding-left:15px}
</style>
